<script lang="ts" setup>
import { NDrawer, NDrawerContent } from "naive-ui";
import { useDesignStore } from "@/stores/module/design";
import { toRefs } from "vue";
import ThemeConfig from "./components/ThemeConfig.vue";
import LayoutConfig from "./components/LayoutConfig.vue";
import LangConfig from "./components/LangConfig.vue";
import UIConfig from "./components/UIConfig.vue";
import { useI18n } from "@/hooks/useI18n";
const { t } = useI18n();

const { isShowDrawer, drawerWidth, drawerPlacement, isGreyMode } = toRefs(useDesignStore());
</script>

<template>
  <NDrawer
    v-model:show="isShowDrawer"
    :width="drawerWidth"
    :placement="drawerPlacement"
    :class="{ 'filter-grayscale-100': isGreyMode }"
  >
    <NDrawerContent title="主题配置" closable>
      <ThemeConfig />
      <LayoutConfig />
      <LangConfig />
      <UIConfig />
    </NDrawerContent>
  </NDrawer>
</template>
